<template>
	<div class="group_container">
		<div class="group_box">
			<div class="g_pic" align="center">
				<img src="../../assets/qunzu.png" width="150" height="150" />
			</div>
			<el-form ref="GroupFormRef" :model="GroupForm" :rules="GroupRules" class="group_form" label-width="0px">
				
			  <el-form-item prop="name">
			    <el-input v-model="GroupForm.name" prefix-icon="iconfont iconqunzu"></el-input>
				<span id="nameInfo"></span>
			  </el-form-item>
			  
			<el-form-item>
			    <el-select v-model="GroupForm.groupType">
			        <el-option label="同学同事" value="同学同事"></el-option>
				    <el-option label="兴趣爱好" value="兴趣爱好"></el-option>
				    <el-option label="游戏社区" value="游戏社区"></el-option>
			        <el-option label="学习考试" value="学习考试"></el-option>
				    <el-option label="生活休闲" value="生活休闲"></el-option>
					<el-option label="行业交流" value="行业交流"></el-option>
			    </el-select>
			  </el-form-item>
			  
			<el-form-item prop="number">
			    <el-input v-model.number="GroupForm.number" prefix-icon="iconfont iconrenshu"></el-input>
				<span id="numberInfo"></span>
			  </el-form-item>
			  
			  <el-form-item class="btns" align="center">
			     <el-button type="primary" @click="addGroup()">注册</el-button>
				 <el-button type="info" @click="resetForm()">重置</el-button>
				 <el-button @click="BackGroup()">返回</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			GroupForm:{
				name:"请输入群组名称",
				number:"请输入群组最大成员数",
				groupType:"请选择群组类型"
			},
			GroupRules:{
				name:[
					{ required: true, message: '群组名称为必填项目', trigger: 'blur' },
					{ min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
				],
				number:[
					{ type: 'number', required: true, message: '群组成员数量必须为数字类型', trigger: 'blur' },
				],
			},
		}
	},
	methods: {
		resetForm() {
			this.$refs.GroupFormRef.resetFields()
		},
		BackGroup() {
			this.$router.push({path:"/group"});
		},
		addGroup() {
			
			this.$refs.GroupFormRef.validate(async valid => {
				console.log(this.GroupForm);
				if (!valid) return;
				const {data:resString} = await this.$http.post("addgroup",this.GroupForm);//②接收后台返回的string数据：含有两块内容--flag和student <--| = |--> ①访问后台
				var res=JSON.parse(JSON.stringify(resString));//转换为json对象
				console.log(res);
				if (res == "ok"){
					this.$message.success("操作成功！！！")
					this.$router.push({path:"/group"});
				}else{
					this.$message.error("操作失败！！！")
				}
				})
		},
	},
}
</script>

<style lang="less" scoped>
	.group_container{
		background-color: #dcffe9;
		height: 100%;
	}
	.group_box{
		width: 500px;
		height: 320px;
		background-color: #c7ffcc;
		border-radius: 10px;
		position: absolute;
		left:50%;
		top:40%;
		transform: translate(-50%,-40%);
	}
	.group_form{
		padding: 0 20px;
	}
</style>
